<template>
    <div class="main">
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
                style="font-weight: bold;">清退在校寄宿生管理模块</span> </div>
        <div class="main-body">

            <div class="main-header float-left">
                <el-button type="primary" @click="AddClick">新增寄宿申请</el-button>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">

                    <el-form-item label="退回学校：">
                        <el-select v-model="formInline.yxqdm" placeholder="请选择学校" @change="yxqdmChange">
                            <el-option v-for="item in xq_list" :key="item.newXqdm" :label="item.xqjc"
                                :value="item.newXqdm">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期范围：">
                        <el-date-picker v-model="formInline.time" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="学生姓名：">
                        <el-input v-model="formInline.stuIdIsName" placeholder="请输入学生姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
                <!-- </div> -->
            </div>

            <el-dialog title="清退寄宿生情况显示窗口" :visible.sync="dialogDetails" width="1000px" :before-close="handleClose">
                <!-- <div style="text-align: center;width: 100%;height: 50px;background-color: antiquewhite;line-height: 50px;">
            此页面内容可以直接打印，请按右面的图标打印本页内容
            <el-button type="primary" icon="el-icon-printer" style="float: right;" v-print="printOption">打印</el-button>
          </div> -->
                <div style="padding: 6px;" class="font-all" id="nbprint">
                    <div
                        style="height: 40px;background-color: #FFEDED;color: #1C511C;font-size: 16px; display: flex;justify-content: center;align-items: center">
                        将被清退寄宿学生的基本信息
                    </div>


                    <el-descriptions class="margin-top" :column="3" size="small" border>
                        <el-descriptions-item label="身份证号">{{ headerLoadData.SFZJH }}</el-descriptions-item>
                        <el-descriptions-item label="学生姓名">{{ headerLoadData.XM }}</el-descriptions-item>
                        <el-descriptions-item label="学生性别">{{ headerLoadData.xbmc }}</el-descriptions-item>

                        <el-descriptions-item label="原就读">{{ headerLoadData.XQJC }}</el-descriptions-item>
                        <el-descriptions-item label="就读年纪">{{ headerLoadData.njmc }}</el-descriptions-item>
                        <el-descriptions-item label="学生类别">{{ headerLoadData.xslb }}</el-descriptions-item>

                        <el-descriptions-item label="家庭类别" :span="2"></el-descriptions-item>
                        <el-descriptions-item label="现去向" :labelStyle="{ 'color': 'red' }">
                            <el-select v-model="jssStuYdList.hxqdm" placeholder="请选择" size="mini" class="width_100">
                                <el-option v-for="item in xxdwXqList" :key="item.newXqdm" :label="item.xqjc"
                                    :value="item.newXqdm"></el-option>
                            </el-select>
                        </el-descriptions-item>

                        <el-descriptions-item label="编入班级">
                            <el-select v-model="jssStuYdList.ydlx" disabled placeholder="请选择" size="mini"
                                class="width_100">
                                <el-option v-for="i in 15" :key="i < 10 ? '0' + i : + i"
                                    :label="i < 10 ? '0' + i + '班' : + i + '班'"
                                    :value="i < 10 ? '0' + i : + i"></el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="健康状况">
                            <el-select v-model="jssStuYdList.jkzk" disabled size="mini" class="width_100">
                                <el-option v-for="item in dm_jkzk" :key="item.DM" :label="item.MC"
                                    :value="item.DM"></el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="监护人类别">
                            <el-select v-model="jssStuYdList.jhrlb" disabled size="mini" class="width_100">
                                <el-option v-for="item in dm_jhrlb" :key="item.DM" :label="item.MC"
                                    :value="item.DM"></el-option>
                            </el-select>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div
                        style="height: 40px;background-color: #fcea9e;color: red;font-size: 16px; display: flex;justify-content: center;align-items: center;margin-top: 4px;">
                        学生家庭主要成员（最多两个）
                    </div>
                    <el-descriptions class="margin-top" :column="3" size="small" border>
                        <el-descriptions-item label="成员1称谓">
                            <el-input disabled v-model="tStuJtcyList[0].cw" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="成员姓名">
                            <el-input disabled v-model="tStuJtcyList[0].name" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="年龄">
                            <el-input disabled v-model="tStuJtcyList[0].age" clearable size="mini"></el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="最高学历">
                            <el-select v-model="tStuJtcyList[0].xl" disabled size="mini" class="width_100">
                                <el-option v-for="item in dm_xl" :key="item.DM" :label="item.MC" :value="item.DM">
                                </el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="工作单位">
                            <el-input disabled v-model="tStuJtcyList[0].gzdw" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系电话">
                            <el-input disabled v-model="tStuJtcyList[0].lxfs" clearable size="mini"></el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="成员2称谓">
                            <el-input disabled v-model="tStuJtcyList[1].cw" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="成员姓名">
                            <el-input disabled v-model="tStuJtcyList[1].name" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="年龄">
                            <el-input disabled v-model="tStuJtcyList[1].age" clearable size="mini"></el-input>
                        </el-descriptions-item>

                        <el-descriptions-item label="最高学历">
                            <el-select v-model="tStuJtcyList[1].xl" disabled size="mini" class="width_100">
                                <el-option v-for="item in dm_xl" :key="item.DM" :label="item.MC" :value="item.DM">
                                </el-option>
                            </el-select>
                        </el-descriptions-item>
                        <el-descriptions-item label="工作单位">
                            <el-input disabled v-model="tStuJtcyList[1].gzdw" clearable size="mini"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系电话">
                            <el-input disabled v-model="tStuJtcyList[1].lxfs" clearable size="mini"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>



                    <!-- <table border='0' cellspacing="0" cellpadding="0"
              style="border-collapse:collapse;border-style:none; font-size:15px; width:100%;">
              <tr>
                <td style="text-align:right; font-size:13px; height:50px; line-height:50px; padding-right:10px;">
                  查询日期:{{ getNowTimeDate() }}
                </td>
              </tr>
            </table> -->
                </div>

                <span slot="footer" class="dialog-footer">
                    <!-- <el-button type="success" @click="pushPass" size="mini">申请审核通过</el-button>
            <el-button type="info" @click="pushNoPass" size="mini" plain>申请审核不通过</el-button> -->

                    <el-button v-if="isWay" type="warning" @click="AddClickPush" size="mini" plain>确定修改申请</el-button>
                    <el-button v-else type="success" @click="AddClickPush" size="mini" plain>确定提交申请</el-button>
                    <el-button @click="dialogDetails = false" size="mini">放弃修改</el-button>
                </span>
            </el-dialog>

            <div class="main-center float-left">
                <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
                    :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">

                    <el-table-column prop="hxqdmString" label="去向学校"></el-table-column>
                    <el-table-column prop="sqsj" label="申请日期"></el-table-column>
                    <el-table-column prop="xm" label="姓1名">
                        <template slot-scope="scope">
                            {{ scope.row.stu.xm }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="njString" label="年级"></el-table-column>
                    <el-table-column prop="njString" label="家庭类别"></el-table-column>
                    <el-table-column prop="sjz" label="审核状态">
                        <template slot-scope="scope" style="z-index: -9999;">
                            <span v-if="scope.row.sjz == '0'">不通过</span>
                            <span v-else-if="scope.row.sjz == '1'">通过</span>
                            <span v-else>未终审</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ydlczt" label="流程状态">
                        <template slot-scope="scope" style="z-index: -9999;">
                            <span v-if="scope.row.ydlczt == '0'">拒接收</span>
                            <span v-else-if="scope.row.ydlczt == '1'">已接收</span>
                            <span v-else>待接收</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope" style="z-index: -9999;">
                            <el-button @click="handleClick(scope.row)" type="text" size="small"
                                style="color: #ff4d4f;">查看与编辑</el-button>
                                <el-button @click="removeJssSQa(scope.row)" type="text" size="small"
                                style="color: #ff4d4f;">撤销申请</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="footer-pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
                        :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper"
                        :total="formInline.total">
                    </el-pagination>
                </div>
            </div>


            <el-dialog title="学生信息查询窗口" :visible.sync="dialogVisibleAddouterVisible" width="900px"
                :before-close="handleClose1">
                <el-dialog width="30%" title="内层 Dialog" :visible.sync="dialogVisibleAddinnerVisible" append-to-body>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleAddinnerVisible = false">取 消</el-button>
                        <el-button type="primary" @click="pushTO">确定新增寄宿申请</el-button>
                    </span>
                </el-dialog>
                <div style="margin: 10px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                        <el-form-item label="年级：">
                            <el-select v-model="dialogGrade" placeholder="请选择年级" @change="changeGrade">
                                <el-option v-for="(item, index) in gradeList" :key="item.NJ" :label="item.mc"
                                    :value="item.NJ">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级：">
                            <el-select v-model="dialogClass" placeholder="请选择班级" @change="getStuList">
                                <el-option v-for="(item, index) in classLists" :key="item.BJ" :label="item.BJ + '班'"
                                    :value="item.BJ">
                                </el-option>
                            </el-select>
                            <span style="margin-left: 4px;">在下表中选择清退寄宿学生，按图标进行申报</span>
                        </el-form-item>
                    </el-form>


                    <el-table :data="dialogStuList" style="width: 100%" max-height="350">
                        <el-table-column type="index" label="序号" width="100">
                        </el-table-column>
                        <el-table-column prop="XQJC" label="现就读学校">
                        </el-table-column>
                        <el-table-column prop="njmc" label="年级">
                        </el-table-column>
                        <el-table-column prop="xm" label="姓名">
                        </el-table-column>
                        <el-table-column prop="xbmc" label="性别" width="120">
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="goInner(scope.row, tableData)" type="text"
                                    size="small">
                                    申报
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="footer-pagination">
                        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                            :current-page="dialogformInline.pageNum" :page-size="dialogformInline.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="dialogformInline.total">
                        </el-pagination>
                    </div>

                </div>


            </el-dialog>

        </div>
    </div>
</template>
<script>
import httplogin from "../../api/login";
export default {
    name: 'Social',
    data() {
        return {
            printOption: {
                id: 'nbprint', // 打印元素的id 不需要携带#号
                popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            },
            tableData: [],
            formInline: {
                yxqdm: "",
                time: '',
                njDm: '',
                stuIdIsName: '',
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0,
                time: ['', '']
            },
            xq_list: [],//校区类别 options
            dialogDetails: false,
            JiSuShengInfo: {},
            schoolList: [],
            headerLoadData: {},
            dm_jkzk: [],
            tStuJtcyList: [
                {
                    id: "",
                    sfzjlx: '',
                    sfzjh: '',
                    stuId: "",
                    cw: "",
                    name: "",
                    age: '',
                    zy: '',
                    xl: "",
                    jjnl: '',
                    gzdw: "",
                    lxfs: "",
                    operateTime: "",
                    operator: ""
                },
                {
                    id: "",
                    sfzjlx: '',
                    sfzjh: '',
                    stuId: "",
                    cw: "",
                    name: "",
                    age: '',
                    zy: '',
                    xl: "",
                    jjnl: '',
                    gzdw: "",
                    lxfs: "",
                    operateTime: "",
                    operator: ""
                },
            ],//家庭信息
            dm_jhrlb: [],//监护人类别
            dm_xl: [],//学历信息
            xxdwXqList: [],
            jssStuYdList: {
                hxqdm: "",

            },
            classList: [
                {
                    id: '01',
                    className: '01'
                },
            ],
            dialogVisibleAddouterVisible: false,
            dialogVisibleAddinnerVisible: false,
            gradeList: [],
            classLists: [],
            dialogGrade: '',
            dialogClass: '',
            dialogStuList: [],
            dialogformInline: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            isWay: 0,//0 表示增加寄宿生里面的详情   1表示详情修改
        }
    },
    mounted() {
        this.getschoolList()
        this.getOnGuardFacultyway()
    },
    methods: {
        async removeJssSQa(row) {
            this.$confirm(`确认撤销【${row.stu.xm}】吗`, '撤销申请', {
                confirmButtonText: '确定撤销申请',
                cancelButtonText: '放弃'
            }).then(async () => {
                let obj = {
                    id: row.id
                }
                let res = await httplogin.removeJssSQ(obj)
                if (res.data.code == 200) {
                    this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
                } else {
                    this.$message({ showClose: true, message: '操作异常', type: 'warning' });
                }
                this.getOnGuardFacultyway()
            })

        },
        goInner(val) {
            let obj = {
                stuId: val.STU_ID,
            }
            this.getJssSqEditLoad(obj)
            this.dialogDetails = true
            this.isWay = 0
            // this.dialogVisibleAddinnerVisible=true
        },
        pushTO() { },
        AddClick() {
            this.dialogVisibleAddouterVisible = true
            this.getDetilsDialogLists()
        },
        async changeGrade(row) {
            let obj = {
                nj: row
            }
            let res = await httplogin.jssTHaddSelectFilterByBj(obj);
            if (res.data.code == 200) {
                this.classLists = res.data.data.data
                // this.dialogClass = res.data.data.data[0].MC
                this.dialogClass = '01'
            }

            await this.getStuList()

        },

        async getStuList() {
            let obj = {
                nj: this.dialogGrade + '',
                bj: this.dialogClass + '',
                pageNum: this.dialogformInline.pageNum,
                pageSize: this.dialogformInline.pageSize,
            }
            let res = await httplogin.JssSqSaveLoad(obj);
            if (res.data.code == 200) {
                this.dialogStuList = res.data.data.data.list
                this.dialogformInline.total = res.data.data.data.count
            }

        },
        async getDetilsDialogLists() {
            let res = await httplogin.jssTHaddSelectFilterByNj();
            if (res.data.code == 200) {
                this.gradeList = res.data.data.data
                this.dialogGrade = res.data.data.data[0].NJ
                this.changeGrade(res.data.data.data[0].NJ)
            }
        },
        yxqdmChange() {
            this.getOnGuardFacultyway()
        },
        async AddClickPush(row) {
            if (!this.jssStuYdList.hxqdm) {
                this.$message({
                    message: '请选择现去向退回学校！',
                    type: 'warning'
                });
            }
            let jssSqVoData = {
                jhrlb: this.jssStuYdList.jhrlb,
                jkzk: this.jssStuYdList.jkzk,
                hxqdm: this.jssStuYdList.hxqdm,
                yxqdm: this.headerLoadData.new_XQDM,
                stuId: this.headerLoadData.STU_ID,
                bj: this.jssStuYdList.ydlx,
            }
            let jssSqVo = {
                jssStuYd: Object.assign(this.jssStuYdList, jssSqVoData),
                jtcyList: this.tStuJtcyList
            }
            let res = await httplogin.jssTHSq(jssSqVo);
            if (res.data.code == 200) {
                this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
            } else {
                this.$message({ showClose: true, message: '新增失败，操作异常', type: 'warning' });
            }
            this.dialogVisibleAddouterVisible = false
            this.dialogDetails = false
            this.getOnGuardFacultyway()
        },
        modifypushAdd() {

        },
        async pushNoPass(row) {
            let jssSqVo = {
                jssStuYd: this.jssStuYdList,
                jtcyList: this.tStuJtcyListx
            }
            let res = await httplogin.jssTH_AddSelectData(jssSqVo);
            if (res.data.code == 200) {
                this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
            } else {
                this.$message({ showClose: true, message: res.data.data.data, type: 'warning' });
            }
            this.dialogDetails = false
            this.getOnGuardFacultyway()
        },
        async pushPass(row) {
            // console.log(row);
            let jssSqVo = {
                jssStuYd: this.jssStuYdList,
                jtcyList: this.tStuJtcyList
            }
            let res = await httplogin.handleJssSHConsentApi(jssSqVo);
            if (res.data.code == 200) {
                this.$message({ showClose: true, message: res.data.data.data, type: 'success' });
            } else {
                this.$message({ showClose: true, message: res.data.data.data, type: 'warning' });
            }
            this.dialogDetails = false
            this.getOnGuardFacultyway()
        },
        async getOnGuardFacultyway() {
            if (!this.formInline.time) {
                this.formInline.time = [' ', ' ']
            }
            let data = {
                GWZT: 1,
                current: this.formInline.currentPage,
                size: this.formInline.limit,
                yxqdm: this.formInline.yxqdm,
                njDm: this.formInline.njDm,
                stuIdIsName: this.formInline.stuIdIsName,
                before: this.formInline.time[0] || '',
                after: this.formInline.time[1] || ''
            }
            let res = await httplogin.jssTHListData(data);
            if (res.data.code == 200) {
                this.tableData = res.data.data.data;
                this.formInline.total = res.data.data.data.count;
            }
        },
        async getschoolList() {
            let res = await httplogin.jssTHListDataFilerXqdmLoad();
            if (res.data.code == 200) {
                this.xq_list = res.data.data.data
            }
        },

        getNowTimeDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            // const hours = ('0' + now.getHours()).slice(-2);
            // const minutes = ('0' + now.getMinutes()).slice(-2);
            // const seconds = ('0' + now.getSeconds()).slice(-2);
            const formattedTime = year + "年" + month + "月" + day + "日"
            return formattedTime
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        //点击查看详情 open 弹框
        handleClick(row) {
            console.log(row)
            this.getJssSqEditLoad(row)
            this.jssStuYdList.hxqdm = row.hxqdmString
            this.dialogDetails = true
            this.isWay = 1
        },
        async getJssSqEditLoad(val) {
            let obj = {
                stuId: val.stuId,
            }
            let res = await httplogin.getJssSqEditLoad(obj)
            const { dm_jkzk, headerLoadData, tStuJtcyList, xxdwXqList, dm_jhrlb, dm_xl, jssStuYdList } = res.data.data.data
            if (res.data.code == 200) {
                this.dm_jkzk = dm_jkzk
                this.headerLoadData = headerLoadData[0] || {}
                if (tStuJtcyList.length == 1) {
                    this.tStuJtcyList[0] = tStuJtcyList[0]
                }
                if (tStuJtcyList.length == 2) {
                    this.tStuJtcyList = tStuJtcyList
                }
                this.xxdwXqList = xxdwXqList
                this.dm_jhrlb = dm_jhrlb
                this.dm_xl = dm_xl
                this.jssStuYdList = jssStuYdList[0] || {}
                // this.JiSuShengInfo = res.data.data.jzgInfo
                console.log(res.data.data.data);
            }
        },
        //close 弹框
        handleClose() {
            this.dialogDetails = false
        },
        onSubmit() {
            this.getOnGuardFacultyway()
        },
        handleSizeChange(val) {
            this.formInline.limit = val
            this.getOnGuardFacultyway()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.formInline.currentPage = val
            this.getOnGuardFacultyway()
            // console.log(`当前页: ${val}`);
        },
        handleSizeChange1(val) {
            this.dialogformInline.pageSize = val
            this.getStuList()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange1(val) {
            this.dialogformInline.pageNum = val
            this.getStuList()
            // console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
.width_100 {
    width: 100%;
}

.main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
}

.main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
}

.float-left {
    width: 100%;
    height: auto;
    float: left;
}

.main-header {
    display: flex;
    align-items: center;
    /* justify-content: flex-end; */
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.mr-24 {
    margin-right: 24px;
}

.fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
}

.footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
}

.font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
    padding: 0 !important;
}

::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}
</style>